<template>
    <div class="home clearfix">
        <!-- 内容模块 -->
        <div class="content">
            <div class="box" v-for="(item, i) in boxList">
                <a href="" class="pic" :style="{ backgroundImage:'url('+ item.image +')'}"></a>
                <div class="info">
                    <a href="" class="title">{{item.title}}</a>
                    <p class="about">{{item.taitl}}</p>
                    <div class="date">{{item.date}}</div>
                </div>
            </div>
        </div>
        <!-- 右上侧 -->
        <div class="aside-top">
            <Avatar></Avatar>
        </div>
        <!-- 右下侧 -->
        <div class="aside-bottom">

        </div>
    </div>
</template>

<script>
import Avatar from "./Avatar.vue";
export default {
    name: "Home",
    data () {
        return {
            activeNames: ['1','2','3','4'],
            boxList: [
                {
                    title: '混沌',
                    taitl: '宇宙在渴望混沌，宇宙在渴望混沌，宇宙在渴望混沌，宇宙在渴望混沌，宇宙在渴望混沌',
                    date: '2021-7-28',
                    image: require('../assets/images/bg.jpg')
                },
                {
                    title: '混沌',
                    taitl: '选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻，选择混沌并不可耻',
                    date: '2021-7-28',
                    image: require('../assets/images/cat4.png')
                },
                {
                    title: '混沌',
                    taitl: '电光火石',
                    date: '2021-7-28',
                    image: require('../assets/images/cat.jpg')
                },
                {
                    title: '混沌',
                    taitl: '宇宙在渴望混沌',
                    date: '2021-7-28',
                    image: require('../assets/images/bg.jpg')
                },
                {
                    title: '混沌',
                    taitl: '选择混沌并不可耻',
                    date: '2021-7-28',
                    image: require('../assets/images/cat4.png')
                },
                {
                    title: '混沌',
                    taitl: '电光火石',
                    date: '2021-7-28',
                    image: require('../assets/images/cat.jpg')
                },
            ]
        }
    },
    components: {
        Avatar
    },
    mounted () {
        
    },
    methods: {
        errorHandler() {
            return true
        },
        handleChange(val) {
            console.log(val);
        }
    },
}
</script>

<style lang="less" scoped>
.home{
    width: 100%;
    padding-bottom: 50px;  
    .content{
        float: left;
        width: 75%;
        padding-right: 20px;
        box-sizing: border-box;
        .box{
            width: 100%;
            height: 250px;
            background-color: #fff;
            border-radius: 4px;
            margin-bottom: 20px;
            cursor: pointer;
            &:hover{
                position: relative;
                top: -2px;
                transition: 0.2s all linear;
            }
            .pic{
                display: inline-block;
                width: 250px;
                height: 250px;
                // background-image:url("../assets/images/bg.jpg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                border-radius: 4px 0 0 4px;
                vertical-align: top;
            }
            .info{
                position: relative;
                width: calc(100% - 250px);
                height: 100%;
                display: inline-block;
                vertical-align: top;
                padding: 20px 50px;
                box-sizing: border-box;
                .title{
                    display: inline-block;
                    color: #232323;
                    font-weight: 600;
                    font-size: 20px;
                    text-decoration: none;
                    &:hover{
                        color: #ffa7a7;
                        transition: 0.2s all linear;
                    }
                }
                .about{
                    font-size: 16px;
                    color: #a0a0a0;
                    margin: 10px 0;
                    height: 65px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }
                .date{
                    position: absolute;
                    color: #a0a0a0;
                    bottom: 50px;
                    left: 50px;
                }
            }
        }
    }
    .aside-top{
        float: right;
        width: 25%;
        height: 250px;
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    .aside-bottom{
        float: right;
        width: 25%;
        height: 520px;
        background-color: #fff;
        border-radius: 4px;
    }
    .box_shadow{
        -webkit-box-shadow: #ccc 10px 10px 10px;
        -moz-box-shadow: #ccc 10px 10px 10px;
        box-shadow: 10px 10px 10px #ccc;
        transition: 0.2s all linear;
    }
}
</style>